<template>
  <div class="tableContainer">
    <div class="functionContainer">
      <el-button @click="addData" type = "primary">添加物流线路</el-button>
      <div style="display: flex; align-item: center">
        <input type="text" v-model="searchContent" name="" id="">
        <el-button type = "primary" @click="search">搜索</el-button>
      </div>
    </div>


    <el-table
    :data="tableData"
    border
    style="width: 1000px">
    <el-table-column
      label="路线名称"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.router_name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="途径"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.router_way }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="地址"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.router_address }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="电话"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.router_phone }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleTop(scope.$index, scope.row)">置顶</el-button>
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    class="page"
    background
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :total="total">
  </el-pagination>

  <el-dialog :title="type" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="线路名称：" :label-width="formLabelWidth">
        <el-input v-model="form.router_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="途径：" :label-width="formLabelWidth">
        <el-input v-model="form.router_way" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址：" :label-width="formLabelWidth">
        <el-input v-model="form.router_address" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话：" :label-width="formLabelWidth">
        <el-input v-model="form.router_phone" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="editData">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        form: {
          router_name: '',
          router_phone: '',
          router_way: '',
          router_address: '',
          router_id: ""
        },
        formLabelWidth: '120px',
        type: "",
        searchContent: "",
        total: 1,
        nowData: [],
        page: 1
      }
    },
    async mounted() {
      let result = await this.$axios.post("/routers/getData", {page: this.page});
      this.tableData = result.data.infoList;
      this.total = result.data.length;
      console.log(result);
    },
    methods: {
      addData() {
        console.log("此时执行了");
        this.dialogFormVisible = true;
        this.form.router_address = "";
        this.form.router_phone = "";
        this.form.router_id = "";
        this.form.router_way = "";
        this.form.router_name = "";
      },
      // 置顶方法
      async handleTop(index, row) {
        let result = await this.$axios.post("/routers/handleTop", {router_id: row.router_id, page: this.page})
        console.log(result);
        if(result.data.code == 200) {
          this.tableData = result.data.infoList;
        }
      },
      handleEdit(index, row) {
        this.type = "修改个人信息"
        this.dialogFormVisible = true;
        console.log(row);
        this.form.router_address = row.router_address;
        this.form.router_phone = row.router_phone;
        this.form.router_id = row.router_id;
        this.form.router_way = row.router_way;
        this.form.router_name = row.router_name;
        // console.log(this.form.name);
      },
      async handleDelete(index, row) {
        let result = await this.$axios.post("/routers/deleteData", {router_id: row.router_id, page: this.page});
        console.log(result);
        if(result.data.code == 200) {
          this.tableData = result.data.infoList;
          console.log(result.data.length);
          this.total = result.data.length;
        }
      },
      async search() {
        let result = await this.$axios.post("/routers/searchData", {searchContent: this.searchContent, page: this.page});
        if(result.data.code == 200) {
          this.tableData = result.data.infoList;
          this.total = result.data.length;
        }
        console.log(result);
      },
      async handleCurrentChange(val) {
        console.log("此时执行了该方法");
        this.page = val;
        let result = await this.$axios.post("/routers/getData", {page: val});
        this.tableData = result.data.infoList;
        this.total = result.data.length;
      },
      async editData() {
        let result = await this.$axios.post("/routers/editData", {...this.form, page: this.page});
        console.log(result);
        if(result.data.code == 200) {
          this.tableData = result.data.infoList;
          this.dialogFormVisible = false;
          this.total = result.data.length;
        }
      }

    }
}
</script>

<style scoped>
    .tableContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .functionContainer {
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  } 
  .functionContainer input {
    outline: none;
    padding: 8px;
    font-size: 18px;
    margin-right: 10px   
  }
  .page {
    margin-top: 20px;
  }
</style>